μλ°μ€ν¬λ¦½νΈ κ°μ²΄ ν¨ν΄ λ§€μΉ μ±λ₯μ λν μ¬μΈ΅ λΆμ. λ€μν κΈ°μ μ μ²λ¦¬ μλλ₯Ό νμνκ³ μ μΈκ³ μ¬μ©μλ₯Ό μν μ΅μ ν ν΅μ°°λ ₯μ μ 곡ν©λλ€.
μλ°μ€ν¬λ¦½νΈ κ°μ²΄ ν¨ν΄ λ§€μΉ μ±λ₯: κ°μ²΄ ν¨ν΄ μ²λ¦¬ μλ
μλμ μΈ μλ°μ€ν¬λ¦½νΈ κ°λ° μΈκ³μμ ν¨μ¨μ±κ³Ό μ±λ₯μ κ°μ₯ μ€μν©λλ€. μ ν리μΌμ΄μ μ΄ λ³΅μ‘ν΄μ§μ λ°λΌ λ°μ΄ν° ꡬ쑰λ₯Ό ν¨κ³Όμ μΌλ‘ μ²λ¦¬ν΄μΌ ν νμμ±λ 컀μ§λλ€. κ°λ°μκ° μ μΈμ λ°©μμΌλ‘ κ°μ²΄μμ μμ±μ μΆμΆνκ³ ν λΉν μ μκ² ν΄μ£Όλ κ°λ ₯ν κΈ°λ₯μΈ κ°μ²΄ ν¨ν΄ λ§€μΉμ μ¬κΈ°μ μ€μν μν μ ν©λλ€. μ΄ μ’ ν©μ μΈ λΈλ‘κ·Έ ν¬μ€νΈμμλ μλ°μ€ν¬λ¦½νΈ κ°μ²΄ ν¨ν΄ λ§€μΉμ μ±λ₯ μΈ‘λ©΄, νΉν κ°μ²΄ ν¨ν΄ μ²λ¦¬ μλμ λν΄ μμΈν μμλ΄ λλ€. λ€μν κΈ°μ μ νμνκ³ , μ±λ₯ νΉμ±μ λΆμνλ©°, μ½λλ₯Ό μ΅μ ννκ³ μ νλ μ μΈκ³ κ°λ°μλ€μκ² μ€ν κ°λ₯ν ν΅μ°°λ ₯μ μ 곡ν κ²μ λλ€.
μλ°μ€ν¬λ¦½νΈμ κ°μ²΄ ν¨ν΄ λ§€μΉ μ΄ν΄νκΈ°
μ±λ₯μ λν΄ μμ보기 μ μ, μλ°μ€ν¬λ¦½νΈμμ κ°μ²΄ ν¨ν΄ λ§€μΉμ΄ 무μμ μλ―Ένλμ§ λͺ νν μ΄ν΄ν΄ λ΄ μλ€. ν΅μ¬μ μΌλ‘, μ΄λ κ°μ²΄λ₯Ό λΆν΄νκ³ κ·Έ μμ±μ λ³μμ λ°μΈλ©νλ λ©μ»€λμ¦μ λλ€. μ΄λ μ§λ£¨ν μλ μμ± μ κ·Όμ΄ νμνλ μ½λλ₯Ό μλΉν λ¨μνν©λλ€.
λμ€νΈλμ²λ§ ν λΉ: νλμ μΈ μ κ·Ό λ°©μ
ECMAScript 6(ES6)λ κ°μ²΄ λμ€νΈλμ²λ§μ λμ νμΌλ©°, μ΄λ κ°μ²΄ ν¨ν΄ λ§€μΉμ μ¬μ€μ νμ€μ΄ λμμ΅λλ€. μ΄λ₯Ό ν΅ν΄ κ°μ²΄μμ μμ±μ κΊΌλ΄ κ°λ³ λ³μμ ν λΉν μ μμ΅λλ€.
κΈ°λ³Έ λμ€νΈλμ²λ§:
const user = {
name: 'Alice',
age: 30,
email: 'alice@example.com'
};
const { name, age } = user;
console.log(name); // "Alice"
console.log(age); // 30
μ΄ κ°λ¨ν ꡬ문μ νΉμ λ°μ΄ν°λ₯Ό κ°κ²°νκ² μΆμΆνλ λ°©λ²μ μ 곡ν©λλ€. λν λμ€νΈλμ²λ§ μ€μ λ³μ μ΄λ¦μ λ°κΎΈκ±°λ μμ±μ΄ μ‘΄μ¬νμ§ μμ κ²½μ° κΈ°λ³Έκ°μ μ 곡ν μλ μμ΅λλ€.
const person = {
firstName: 'Bob'
};
const { firstName: name, lastName = 'Smith' } = person;
console.log(name); // "Bob"
console.log(lastName); // "Smith"
λμ€νΈλμ²λ§μ λλ¨Έμ§ μμ±(Rest Properties)
κ°μ²΄ λμ€νΈλμ²λ§ λ΄μ λλ¨Έμ§ κ΅¬λ¬Έ(`...`)μ μ¬μ©νλ©΄ λλ¨Έμ§ μμ±λ€μ μλ‘μ΄ κ°μ²΄λ‘ λͺ¨μ μ μμ΅λλ€. μ΄λ νΉμ μμ±μ λΆλ¦¬ν λ€μ κ°μ²΄μ λλ¨Έμ§ λΆλΆμ λ³λλ‘ μ²λ¦¬ν΄μΌ ν λ νΉν μ μ©ν©λλ€.
const product = {
id: 101,
name: 'Laptop',
price: 1200,
stock: 50
};
const { id, ...otherDetails } = product;
console.log(id); // 101
console.log(otherDetails); // { name: 'Laptop', price: 1200, stock: 50 }
μ€μ²©λ λμ€νΈλμ²λ§
κ°μ²΄ λμ€νΈλμ²λ§μ μ€μ²©λ κ°μ²΄μλ μ μ©ν μ μμ΄, κΉμ΄ μ€μ²©λ μμ±μ μ½κ² μ κ·Όν μ μμ΅λλ€.
const company = {
name: 'TechGlobal Inc.',
location: {
city: 'New York',
country: 'USA'
}
};
const { location: { city, country } } = company;
console.log(city); // "New York"
console.log(country); // "USA"
κ°μ²΄ ν¨ν΄ μ²λ¦¬μ μ±λ₯ κ³ λ €μ¬ν
λμ€νΈλμ²λ§ ν λΉμ λ§€μ° νΈλ¦¬νμ§λ§, λκ·λͺ¨ μ ν리μΌμ΄μ μ΄λ μ±λ₯μ΄ μ€μν μ½λ μΉμ μμλ κ·Έ μ±λ₯ νΉμ±μ΄ μ€μν κ³ λ €μ¬νμ λλ€. μλ°μ€ν¬λ¦½νΈ μμ§μ΄ μ΄λ¬ν μμ μ μ΄λ»κ² μ²λ¦¬νλμ§ μ΄ν΄νλ©΄ κ°λ°μκ° μ 보μ μ κ°ν κ²°μ μ λ΄λ¦¬λ λ° λμμ΄ λ μ μμ΅λλ€.
λμ€νΈλμ²λ§μ μ€λ²ν€λ
κΈ°λ³Έμ μΌλ‘ λμ€νΈλμ²λ§μ κ°μ²΄ μμ±μ μ κ·Όνκ³ , μ‘΄μ¬ μ¬λΆλ₯Ό νμΈν λ€μ, λ³μμ ν λΉνλ κ³Όμ μ ν¬ν¨ν©λλ€. μ΅μ μλ°μ€ν¬λ¦½νΈ μμ§(Chromeκ³Ό Node.jsμ V8, Firefoxμ SpiderMonkey λ±)μ κ³ λλ‘ μ΅μ νλμ΄ μμ΅λλ€. κ·Έλ¬λ κ·Ήλλ‘ μ±λ₯μ λ―Όκ°ν μλ리μ€μμλ νΉν λ€μκ³Ό κ°μ κ²½μ° μ§μ μ μΈ μμ± μ κ·Όμ λΉν΄ μ½κ°μ μ€λ²ν€λκ° μμ μ μλ€λ μ μ μ΄ν΄ν κ°μΉκ° μμ΅λλ€.
- λ§μ μμ μμ±μ λμ€νΈλμ²λ§ν λ.
- κΉμ΄ μ€μ²©λ μμ±μ λμ€νΈλμ²λ§ν λ.
- μ΄λ¦ λ³κ²½ λ° κΈ°λ³Έκ°μ ν¬ν¨νλ 볡μ‘ν λμ€νΈλμ²λ§ ν¨ν΄μ μ¬μ©ν λ.
λ²€μΉλ§νΉ: λμ€νΈλμ²λ§ vs. μ§μ μ κ·Ό
μ΄λ¬ν μ°¨μ΄λ₯Ό μ λννκΈ° μν΄ λͺ κ°μ§ λ²€μΉλ§νΉ μλ리μ€λ₯Ό κ³ λ €ν΄ λ³΄κ² μ΅λλ€. μ νν μ±λ₯ μμΉλ μλ°μ€ν¬λ¦½νΈ μμ§, λΈλΌμ°μ λ²μ λ° νλμ¨μ΄μ λ°λΌ ν¬κ² λ¬λΌμ§ μ μλ€λ μ μ μ μν΄μΌ ν©λλ€. λ°λΌμ μ΄λ μΌλ°μ μΈ κ²½ν₯μ 보μ¬μ£Όλ μμμ λλ€.
μλλ¦¬μ€ 1: κ°λ¨ν μμ± μΆμΆ
const data = {
a: 1, b: 2, c: 3, d: 4, e: 5,
f: 6, g: 7, h: 8, i: 9, j: 10
};
// Technique 1: Destructuring
const { a, b, c, d, e } = data;
// Technique 2: Direct Access
const valA = data.a;
const valB = data.b;
const valC = data.c;
const valD = data.d;
const valE = data.e;
μ΄ κ°λ¨ν κ²½μ°, λμ€νΈλμ²λ§μ μ’ μ’ μ§μ μ κ·Όλ§νΌ λΉ λ₯΄κ±°λ λ§€μ° κ·Όμ ν μ±λ₯μ 보μ λλ€. μμ§μ μμ°¨μ μΈ μμ± μ κ·Όμ ν¨μ¨μ μΌλ‘ μ΅μ νν μ μμ΅λλ€.
μλλ¦¬μ€ 2: λ§μ μμ± μΆμΆ
νλμ κ°μ²΄μμ λ§μ μμ μμ±μ λμ€νΈλμ²λ§ν λ μ±λ₯ μ°¨μ΄κ° λ λμ λ μ μμ§λ§, μΌλ°μ μΈ μΉ μ ν리μΌμ΄μ μμλ μ¬μ ν λ―Έλ―Έν μμ€μΈ κ²½μ°κ° λ§μ΅λλ€. μμ§μ μ¬λ¬ λ²μ μ‘°νμ ν λΉμ μνν΄μΌ ν©λλ€.
μλλ¦¬μ€ 3: μ€μ²©λ μμ± μΆμΆ
μ€μ²©λ λμ€νΈλμ²λ§μ μ¬λ¬ μμ€μ μμ± μ κ·Όμ ν¬ν¨ν©λλ€. ꡬ문μμΌλ‘λ κΉλνμ§λ§, μ½κ° λ λ§μ μ€λ²ν€λλ₯Ό μ λ°ν μ μμ΅λλ€.
const complexData = {
user: {
profile: {
name: 'Charlie',
details: {
age: 25,
city: 'London'
}
}
}
};
// Destructuring
const { user: { profile: { details: { age, city } } } } = complexData;
// Direct Access (more verbose)
const ageDirect = complexData.user.profile.details.age;
const cityDirect = complexData.user.profile.details.city;
μ΄λ¬ν μ€μ²© μλ리μ€μμ λμ€νΈλμ²λ§κ³Ό μ°μμ μΈ μ§μ μμ± μ κ·Ό κ°μ μ±λ₯ μ°¨μ΄λ μΌλ°μ μΌλ‘ λ―Έλ―Έν©λλ€. μ¬κΈ°μ λμ€νΈλμ²λ§μ μ£Όλ μ΄μ μ κ°λ μ±κ³Ό μ½λ μ€λ³΅ κ°μμ λλ€.
λλ¨Έμ§ μμ±(Rest Properties)μ μ±λ₯
κ°μ²΄μ λν λλ¨Έμ§ κ΅¬λ¬Έ(`...`)μ μ κ°μ²΄λ₯Ό μμ±νκ³ μμ±μ 볡μ¬νλ μμ μ ν¬ν¨ν©λλ€. μ΄ μμ μ νΉν λλ¨Έμ§ κ°μ²΄μ λ§μ μμ±μ΄ μλ κ²½μ° κ³μ° λΉμ©μ΄ λ°μν©λλ€. λͺ κ°μ μμ±λ§ νμν λ§€μ° ν° κ°μ²΄μ κ²½μ°, μ§μ μ κ·Όμ΄ λλ¨Έμ§ μμ±κ³Ό ν¨κ» λμ€νΈλμ²λ§νλ κ²λ³΄λ€ μ½κ° λΉ λ₯Ό μ μμ§λ§, κ·Έ μ°¨μ΄λ μΌλ°μ μΌλ‘ λͺ νμ±μ μν΄ λμ€νΈλμ²λ§μ νΌν λ§νΌ ν¬μ§ μμ΅λλ€.
λμμ μΈ κ°μ²΄ μ²λ¦¬ κΈ°μ κ³Ό κ·Έ μ±λ₯
λμ€νΈλμ²λ§μ΄ κ°μ²΄ ν¨ν΄ λ§€μΉμ κ°μ₯ μΌλ°μ μΈ ννμ΄μ§λ§, λ€λ₯Έ μλ°μ€ν¬λ¦½νΈ ꡬ문λ λΉμ·ν κ²°κ³Όλ₯Ό μ»μ μ μμΌλ©° κ°κ° κ³ μ ν μ±λ₯ νλ‘νμ κ°μ§λλ€.
μ ν΅μ μΈ μμ± μ κ·Ό
λ²€μΉλ§ν¬μμ 보μλ―μ΄, μ§μ μ μΈ μμ± μ κ·Ό(`object.propertyName`)μ κ°μ²΄μμ λ°μ΄ν°λ₯Ό κ°μ Έμ€λ κ°μ₯ κΈ°λ³Έμ μΈ λ°©λ²μ λλ€. μ§μ μ μΈ μ‘°νμ΄λ―λ‘ μΌλ°μ μΌλ‘ μ€λ²ν€λκ° κ°μ₯ μ μ΅λλ€. κ·Έλ¬λ μ¬λ¬ μμ±μ μΆμΆν λλ κ°μ₯ μ₯ν©ν λ°©μμ΄κΈ°λ ν©λλ€.
const person = { name: 'David', age: 40 };
const personName = person.name;
const personAge = person.age;
μ±λ₯: μΌλ°μ μΌλ‘ κ°λ³ μμ± μ κ·Όμ κ°μ₯ λΉ λ¦ λλ€. μ¬λ¬ μμ±μ μΆμΆν λλ κ°λ μ±μ΄ λ¨μ΄μ§κ³ λ°λ³΅μ μ λλ€.
`Object.keys()`, `Object.values()`, `Object.entries()`
μ΄ λ©μλλ€μ κ°μ²΄ μμ±μ μννλ λ°©λ²μ μ 곡ν©λλ€. λμ€νΈλμ²λ§κ³Ό κ°μ μ§μ μ μΈ ν¨ν΄ λ§€μΉμ μλμ§λ§, 루νλ λ€λ₯Έ λ°°μ΄ λ©μλμ ν¨κ» κ°μ²΄ λ°μ΄ν°λ₯Ό μ²λ¦¬νλ λ° μμ£Ό μ¬μ©λ©λλ€.
const settings = {
theme: 'dark',
fontSize: 16,
notifications: true
};
// Using Object.entries with destructuring in a loop
for (const [key, value] of Object.entries(settings)) {
console.log(`${key}: ${value}`);
}
μ±λ₯: μ΄ λ©μλλ€μ κ°μ²΄μ μ΄κ±° κ°λ₯ν μμ±μ μννκ³ μ λ°°μ΄μ μμ±νλ μμ μ ν¬ν¨ν©λλ€. μ±λ₯ μ€λ²ν€λλ μμ±μ μμ κ΄λ ¨μ΄ μμ΅λλ€. κ°λ¨ν μΆμΆμ κ²½μ° λμ€νΈλμ²λ§λ³΄λ€ λ ν¨μ¨μ μ λλ€. κ·Έλ¬λ λͺ¨λ λλ μΌλΆ μμ±μ λμ μΌλ‘ μ²λ¦¬ν΄μΌ νλ μλ리μ€μμλ νλ₯ν©λλ€.
`switch` λ¬Έ (νΉμ κ° λ§€μΉμ©)
μμ± μΆμΆμ μν μ§μ μ μΈ κ°μ²΄ ν¨ν΄ λ§€μΉμ μλμ§λ§, `switch` λ¬Έμ κ°μ μ¬λ¬ κ°λ₯ν μΌμ΄μ€μ λΉκ΅νλ λ° μ¬μ©λλ ν¨ν΄ λ§€μΉμ ν ννμ λλ€. νΉμ μμ±μ κΈ°λ°μΌλ‘ κ°μ²΄λ₯Ό 쑰건λΆλ‘ μ²λ¦¬νλ λ° μ¬μ©ν μ μμ΅λλ€.
function processCommand(command) {
switch (command.type) {
case 'CREATE':
console.log('Creating:', command.payload);
break;
case 'UPDATE':
console.log('Updating:', command.payload);
break;
default:
console.log('Unknown command');
}
}
processCommand({ type: 'CREATE', payload: 'New Item' });
μ±λ₯: `switch` λ¬Έμ μΌλ°μ μΌλ‘ λ§μ μμ κ°λ³ μΌμ΄μ€μ λν΄ λ§€μ° μ±λ₯μ΄ μ’μ΅λλ€. μλ°μ€ν¬λ¦½νΈ μμ§μ μ’ μ’ μ΄λ₯Ό ν¨μ¨μ μΈ μ ν ν μ΄λΈλ‘ μ΅μ νν©λλ€. μ±λ₯μ `command` λ΄μ μμ± μμλ 무κ΄νμ§λ§ `case` λ¬Έμ μμ λ°λΌ λ¬λΌμ§λλ€. μ΄λ κ°μ²΄ λμ€νΈλμ²λ§κ³Όλ λ€λ₯Έ μ’ λ₯μ ν¨ν΄ λ§€μΉμ λλ€.
κΈλ‘λ² μ ν리μΌμ΄μ μ μν κ°μ²΄ ν¨ν΄ μ²λ¦¬ μ΅μ ν
κΈλ‘λ² μ¬μ©μλ₯Ό λμμΌλ‘ μ ν리μΌμ΄μ μ ꡬμΆν λ, λ€μν λ€νΈμν¬ μ‘°κ±΄, μ₯μΉ κΈ°λ₯ λ° μ§μ λ°μ΄ν° μΌν° μ§μ° μκ°μΌλ‘ μΈν΄ μ±λ₯ κ³ λ €μ¬νμ λμ± μ€μν΄μ§λλ€. λ€μμ κ°μ²΄ ν¨ν΄ μ²λ¦¬λ₯Ό μ΅μ ννκΈ° μν λͺ κ°μ§ μ λ΅μ λλ€.
1. μ½λ νλ‘νμΌλ§
κ°μ₯ μ€μν λ¨κ³λ μ€μ μ±λ₯ λ³λͺ© νμμ μλ³νλ κ²μ λλ€. μ£λΆλ¦¬ μ΅μ ννμ§ λ§μΈμ. λΈλΌμ°μ κ°λ°μ λꡬ(μ±λ₯ ν)λ Node.js νλ‘νμΌλ§ λꡬλ₯Ό μ¬μ©νμ¬ κ°μ₯ λ§μ μκ°μ μλΉνλ μ νν ν¨μλ μμ μ μ°Ύμλ΄μΈμ. λλΆλΆμ μ€μ μ ν리μΌμ΄μ μμ κ°μ²΄ λμ€νΈλμ²λ§μ μ€λ²ν€λλ λ€νΈμν¬ μμ², 볡μ‘ν μκ³ λ¦¬μ¦ λλ DOM μ‘°μμ λΉν΄ 무μν μ μλ μμ€μ λλ€.
2. μ±λ₯μ μΉλͺ μ μΈ μν₯μ΄ μλ ν κ°λ μ±μ μ°μ μνμΈμ
κ°μ²΄ λμ€νΈλμ²λ§μ μ½λ κ°λ μ±κ³Ό μ μ§λ³΄μμ±μ ν¬κ² ν₯μμν΅λλ€. λλΆλΆμ μ¬μ© μ¬λ‘μμ λμ€νΈλμ²λ§κ³Ό μ§μ μ κ·Ό κ°μ μ±λ₯ μ°¨μ΄λ λͺ νμ±μ ν¬μν λ§νΌ ν¬μ§ μμ΅λλ€. λ¨Όμ κΉ¨λνκ³ μ΄ν΄νκΈ° μ¬μ΄ μ½λλ₯Ό μ°μ μνμΈμ.
3. κΉμ΄ μ€μ²©λ ꡬ쑰μ ν° κ°μ²΄μ μ μνμΈμ
λ§€μ° ν¬κ±°λ κΉμ΄ μ€μ²©λ κ°μ²΄λ‘ μμ νκ³ μκ³ νλ‘νμΌλ§ κ²°κ³Ό μ±λ₯ λ¬Έμ κ° λνλλ€λ©΄ λ€μμ κ³ λ €ν΄ λ³΄μΈμ.
- μ νμ λμ€νΈλμ²λ§: μ€μ λ‘ νμν μμ±λ§ λμ€νΈλμ²λ§νμΈμ.
- λΆνμν λλ¨Έμ§ μ°μ° νΌνκΈ°: λͺ κ°μ μμ±λ§ νμνκ³ κ°μ²΄μ λλ¨Έμ§ λΆλΆμ μ¬μ©ν μλκ° μλ€λ©΄, μ±λ₯μ΄ κ°μ₯ μ€μν κ²½μ° `...rest` ꡬ문μ νΌνμΈμ.
- λ°μ΄ν° μ κ·ν: κ²½μ°μ λ°λΌ λ°μ΄ν° ꡬ쑰λ₯Ό λ μ€μ²©λλλ‘ μ¬μ€κ³νλ©΄ μ±λ₯κ³Ό μ½λ λͺ νμ±μ λͺ¨λ ν₯μμν¬ μ μμ΅λλ€.
4. μλ°μ€ν¬λ¦½νΈ μμ§ μ΄ν΄νκΈ°
μλ°μ€ν¬λ¦½νΈ μμ§μ λμμμ΄ λ°μ νκ³ μμ΅λλ€. μ΄μ λ²μ μμλ λμ λλ μ±λ₯ λΉμ©μ΄ μμμ μ μλ κΈ°λ₯μ΄ μ΅μ λ²μ μμλ κ³ λλ‘ μ΅μ νλμμ μ μμ΅λλ€. μλ°μ€ν¬λ¦½νΈ λ°νμ(μ: Node.js λ²μ , λΈλΌμ°μ λ²μ )μ μ΅μ μνλ‘ μ μ§νμΈμ.
5. λ§μ΄ν¬λ‘ μ΅μ νλ μ μ€νκ² κ³ λ €νμΈμ
λ€μμ κ°μμ μΈ λΉκ΅μ΄μ§λ§ μμΉμ 보μ¬μ€λλ€. λ§€μ° ν° κ°μ²΄μμ λ¨ νλμ μμ±μ μλ°±λ§ λ² λ°λ³΅ν΄μ μΆμΆν΄μΌ νλ μλ리μ€μμλ λ€μκ³Ό κ°μ΅λλ€.
const massiveObject = { /* ... 10000 properties ... */ };
// Potentially slightly faster in extremely tight loops for single property extraction
// but much less readable.
const { propertyIActuallyNeed } = massiveObject;
// Direct access might be marginally faster in specific, rare benchmarks
// const propertyIActuallyNeed = massiveObject.propertyIActuallyNeed;
μ€ν κ°λ₯ν ν΅μ°°λ ₯: λλΆλΆμ κ°λ°μμ λλΆλΆμ μ ν리μΌμ΄μ μκ² λμ€νΈλμ²λ§μ΄ μ 곡νλ κ°λ μ± ν₯μμ μ΄λ¬ν μλ리μ€μμμ λ―Έλ―Έν μ±λ₯ μ°¨μ΄λ₯Ό ν¨μ¬ λ₯κ°ν©λλ€. νλ‘νμΌλ§μ ν΅ν΄ μ΄κ²μ΄ μ¬κ°ν λ³λͺ© νμμμ΄ μ¦λͺ λκ³ ν΄λΉ νΉμ ν« ν¨μ€(hot path)μμ κ°λ μ±μ΄ λΆμ°¨μ μΈ λ¬Έμ μΌ κ²½μ°μλ§ μ§μ μ κ·Ό λ°©μμ μ¬μ©νμΈμ.
6. μ±λ₯ μΈκ³ν: λ€νΈμν¬ λ° λ°μ΄ν° μ μ‘
κΈλ‘λ² μ¬μ©μμ κ²½μ°, λ€νΈμν¬λ₯Ό ν΅ν λ°μ΄ν° μ μ‘ μ±λ₯μ΄ ν΄λΌμ΄μΈνΈ μΈ‘ μλ°μ€ν¬λ¦½νΈ μ²λ¦¬ μλλ₯Ό μλνλ κ²½μ°κ° λ§μ΅λλ€. λ€μμ κ³ λ €νμΈμ.
- API μλ΅ ν¬κΈ°: APIκ° ν΄λΌμ΄μΈνΈμ νμν λ°μ΄ν°λ§ μ μ‘νλλ‘ νμΈμ. λͺ κ°μ μμ±λ§ νμν κ²½μ° μ 체 λν κ°μ²΄λ₯Ό 보λ΄λ κ²μ νΌνμΈμ. μ΄λ 쿼리 λ§€κ°λ³μλ νΉμ API μλν¬μΈνΈλ₯Ό ν΅ν΄ λ¬μ±ν μ μμ΅λλ€.
- λ°μ΄ν° μμΆ: API μλ΅μ HTTP μμΆ(Gzip, Brotli)μ νμ©νμΈμ.
- μ½ν μΈ μ μ‘ λ€νΈμν¬(CDN): μ§λ¦¬μ μΌλ‘ λΆμ°λ μλ²μμ μ μ μμ° λ° API μλ΅μ μ 곡νμ¬ μ μΈκ³ μ¬μ©μμ μ§μ° μκ°μ μ€μ΄μΈμ.
μμ: κΈλ‘λ² μ μμκ±°λ νλ«νΌμ μμν΄ λ³΄μΈμ. λμΏμ μλ μ¬μ©μκ° μ ν μΈλΆ μ 보λ₯Ό μμ²ν κ²½μ°, μλ°μ€ν¬λ¦½νΈ ν΄λΌμ΄μΈνΈκ° μΌλ§λ 빨리 μ²λ¦¬νλ μκ΄μμ΄, μκ³ λ§μΆ€νλ API μλ΅μ΄ κ±°λνκ³ μ΅μ νλμ§ μμ μλ΅λ³΄λ€ ν¨μ¬ λΉ λ₯΄κ² λ‘λλ κ²μ λλ€.
μΌλ°μ μΈ ν¨μ κ³Ό λͺ¨λ² μ¬λ‘
ν¨μ 1: μ¬μ©νμ§ μλ λ³μμ λν λμ€νΈλμ²λ§ λ¨μ©
ν° κ°μ²΄λ₯Ό λμ€νΈλμ²λ§ν ν νλ κ°μ μμ±λ§ μ¬μ©νκ³ λλ¨Έμ§λ μ¬μ©νμ§ μμΌλ©΄ μ½κ°μ μ€λ²ν€λκ° λ°μν μ μμ΅λλ€. μ΅μ μμ§μ΄ μ΅μ νλ₯Ό μ μννμ§λ§, νμν κ²λ§ λμ€νΈλμ²λ§νλ κ²μ΄ μ¬μ ν λͺ¨λ² μ¬λ‘μ λλ€.
λͺ¨λ² μ¬λ‘: μΆμΆνλ μμ±μ λͺ μμ μΌλ‘ λ°νμΈμ. λλΆλΆμ μμ±μ΄ νμνλ€λ©΄ λμ€νΈλμ²λ§μ νλ₯ν©λλ€. λ§μ μμ± μ€ νλ κ°λ§ νμνλ€λ©΄ μ§μ μ κ·Όμ΄ λ λͺ ννκ³ μ μ¬μ μΌλ‘ μ½κ° λ λΉ λ₯Ό μ μμ΅λλ€(보ν΅μ μ€μν λ¬Έμ κ° μλμ§λ§).
ν¨μ 2: `null` λλ `undefined` κ°μ²΄ 무μνκΈ°
`null` λλ `undefined` κ°μ²΄μμ μμ±μ λμ€νΈλμ²λ§νλ €κ³ νλ©΄ `TypeError`κ° λ°μν©λλ€. μ΄λ λ°νμ μ€λ₯μ μΌλ°μ μΈ μμΈμ λλ€.
λͺ¨λ² μ¬λ‘: λμ€νΈλμ²λ§νλ κ°μ²΄κ° `null` λλ `undefined`κ° μλμ§ νμ νμΈνμΈμ. λ Όλ¦¬μ OR(`||`) λλ μ΅μ λ 체μ΄λ(`?.`)μ μ¬μ©νμ¬ λ μμ νκ² μ κ·Όν μ μμ§λ§, λμ€νΈλμ²λ§μλ μ ν νμΈμ΄ νμν©λλ€.
const data = null;
// This will throw an error:
// const { property } = data;
// Safer approach:
if (data) {
const { property } = data;
// ... use property
}
// Or using optional chaining for nested properties:
const nestedObj = { user: null };
const userName = nestedObj.user?.name;
console.log(userName); // undefined
ν¨μ 3: λ§₯λ½ λ¬΄μνκΈ°
μ±λ₯μ λ§₯λ½μ λ°λΌ μλμ μ λλ€. νμ΄μ§ λ‘λ μ ν λ² νΈμΆλλ ν¨μμμ λͺ λ°λ¦¬μ΄λ₯Ό μ μ½νλ κ²μ μ€μνμ§ μμ΅λλ€. μ¬μ©μ μνΈμμ© λ£¨ν λ΄μμ μ΄λΉ μμ² λ² νΈμΆλλ ν¨μμμ λͺ λ°λ¦¬μ΄λ₯Ό μ μ½νλ κ²μ λ§€μ° μ€μν©λλ€.
λͺ¨λ² μ¬λ‘: νμ μ ν리μΌμ΄μ μ νλ‘νμΌλ§νμ¬ μ±λ₯ μ΅μ ν λ Έλ ₯μ΄ κ°μ₯ ν° μν₯μ λ―ΈμΉ κ³³μ νμ νμΈμ. μ€μν κ²½λ‘μ μμ£Ό μ€νλλ μ½λ μΉμ μ μ§μ€νμΈμ.
κ²°λ‘ : μ±λ₯κ³Ό κ°λ μ±μ κ· ν
μ£Όλ‘ λμ€νΈλμ²λ§ ν λΉμ ν΅ν μλ°μ€ν¬λ¦½νΈ κ°μ²΄ ν¨ν΄ λ§€μΉμ μ½λ κ°λ μ±, κ°κ²°μ± λ° μ μ§λ³΄μμ± μΈ‘λ©΄μμ μμ²λ μ΄μ μ μ 곡ν©λλ€. μ±λ₯μ κ΄ν΄μλ, νλ μλ°μ€ν¬λ¦½νΈ μμ§μ λλΌμΈ μ λλ‘ ν¨μ¨μ μ λλ€. μ μΈκ³ μ¬μ©μλ₯Ό λμμΌλ‘ νλ λλ€μμ μ ν리μΌμ΄μ μμ κ°μ²΄ λμ€νΈλμ²λ§μ μ±λ₯ μ€λ²ν€λλ 무μν μ μμΌλ©°, λ κΉλν μ½λλ₯Ό μν κ°μΉ μλ μ μΆ©μμ λλ€.
κ°μ²΄ ν¨ν΄ μ²λ¦¬ μ΅μ νμ ν΅μ¬μ λ§₯λ½μ μ΄ν΄νλ λ° μμ΅λλ€.
- λ¨Όμ νλ‘νμΌλ§νμΈμ: μ΅μ ννκΈ° μ μ μ€μ λ³λͺ© νμμ μλ³νμΈμ.
- κ°λ μ±μ μ°μ μνμΈμ: λμ€νΈλμ²λ§μ λͺ νν μ½λλ₯Ό μν κ°λ ₯ν λꡬμ λλ€.
- κ·Ήλ¨μ μΈ κ²½μ°μ μ μνμΈμ: λ§€μ° ν° κ°μ²΄λ κ·Ήλλ‘ λΉλ²ν 루νμ κ²½μ° μ μΆ©μμ κ³ λ €νλ, νλ‘νμΌλ§μΌλ‘ λ¬Έμ κ° νμΈλ κ²½μ°μλ§ ν΄λΉλ©λλ€.
- μ μΈκ³μ μΌλ‘ μκ°νμΈμ: λ€νΈμν¬ μ±λ₯, λ°μ΄ν° μ μ‘ λ° API μ€κ³λ μ’ μ’ ν΄λΌμ΄μΈνΈ μΈ‘ μλ°μ€ν¬λ¦½νΈμ λ§μ΄ν¬λ‘ μ΅μ νλ³΄λ€ κΈλ‘λ² μ¬μ©μμ μ¬μ©μ κ²½νμ ν¨μ¬ λ ν° μν₯μ λ―ΈμΉ©λλ€.
κ· ν μ‘ν μ κ·Ό λ°©μμ μ±νν¨μΌλ‘μ¨ κ°λ°μλ μλ°μ€ν¬λ¦½νΈμ κ°μ²΄ ν¨ν΄ λ§€μΉ κΈ°λ₯μ νμ ν¨κ³Όμ μΌλ‘ νμ©νμ¬ μ μΈκ³ μ¬μ©μλ₯Ό μν ν¨μ¨μ μ΄κ³ κ°λ μ± λμΌλ©° κ³ μ±λ₯μ μ ν리μΌμ΄μ μ λ§λ€ μ μμ΅λλ€.